{% extends 'layout/basic.html' %}
{% block title %}首页{% endblock %}
{% block css %}

    <style>
        .lg {
            border: none;
            background: none;
        }
    </style>

{% endblock %}


{% block login %}
    <li>
        <a>
            <button id="sign_in" class="lg">登录</button>
        </a>
    </li>
    <li>
        {#        <button href="pm/add/" id="sign_up" class="lg">注册</button>#}
        <a href="/pm/add/" id="sign_up">注册</a>
    </li>
{% endblock %}

{% block content %}

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">登录</h4>
                </div>
                <div class="modal-body">
                    <form method="post" novalidate id="formAdd">
                        {% csrf_token %}
                        <div class="form-group">
                            <label>邮箱或手机号</label>
                            {{ form.mobile }}
                            <span style="color: #b92c28">{{ form.mobile.errors.0 }}</span>
                        </div>
                        <div class="form-group">
                            <label>密码</label>
                            {{ form.password }}
                            <span style="color: #b92c28">{{ form.password.errors.0 }}</span>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> Check me out
                            </label>
                        </div>

                        <div class="form-group">
                            <label for="id_code">图片验证码</label>
                            <div class="row">
                                <div class="col-xs-7">
                                    {{ form.code }}
                                    <span style="color: #b92c28">{{ form.code.errors.0 }}</span>
                                </div>
                                <div class="col-xs-5">
                                    <img id="image_code" src="/image/code/" style="width: 125px" title="点击更换">
                                </div>
                            </div>
                        </div>
                        <button id="btnSave" type="submit" class="btn btn-primary">登录</button>
                    </form>
                </div>
            </div>
        </div>
    </div>



{% endblock %}


{% block js %}

    <script type="text/javascript">
        $(function () {
            bindBtnClinkinEvent();
            bindBtnSigninEvent();
            bindImgClinkinEvent();
        })

        function bindBtnClinkinEvent() {
            {# 显示登录对话框 #}
            $("#sign_in").click(function () {
                $("#formAdd")[0].reset();
                $("#myModal").modal("show");
            });
        }

        function bindBtnSigninEvent() {

            {#$("#btnSave").click(function () {#}
            {#    $(".error-msg").empty();#}
            {##}
            {#    $.ajax({#}
            {#        url: "/pm/home1/",#}
            {#        type: "post",#}
            {#        data: $("#formAdd").serialize(),#}
            {#        success: function (res){#}
            {#            if(res.status) alert("创建成功");#}
            {#            else{#}
            {#                alert("创建失败");#}
            {#                $.each(res.error, function (name, errorList){#}
            {#                    $(".error-msg").next().text(errorList[0]);#}
            {#                })#}
            {#            }#}
            {#        }#}
            {#    })#}
        }

        function bindImgClinkinEvent() {
            {# 刷新图片验证码 #}
            $('#image_code').click(function () {
                var old_src = $(this).attr('src')
                $(this).attr('src', old_src + "?");
            })
        }
    </script>

{% endblock %}
